<template>
  <div>
    <el-page-header @back="back()" content="供应商管理页面" style="margin-bottom: 10px;"/>
    <el-table
      :data="suppliers"
      style="width: 100%;"
      >
      <el-table-column
        label="ID">
        <template slot-scope="scope">
          <span v-if="scope.row.tag==0">{{scope.row.id}}</span>
          <el-input v-else v-model="scope.row.id"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="供应商">
        <template slot-scope="scope">
          <span v-if="scope.row.tag==0">{{scope.row.name}}</span>
          <el-input v-else v-model="scope.row.name"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="联系方式">
        <template slot-scope="scope">
          <span v-if="scope.row.tag==0">{{scope.row.phone}}</span>
          <el-input v-else v-model="scope.row.phone"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="地址">
        <template slot-scope="scope">
          <span v-if="scope.row.tag==0">{{scope.row.address}}</span>
          <el-input v-else v-model="scope.row.address"></el-input>
        </template>
      </el-table-column>
      <el-table-column
        label="操作">
        <template slot-scope="scope">
          <div style="display: flex;">
            <template v-if="scope.row.tag!='0'">
            <el-button type="primary"  @click="save(scope.row)">保存</el-button>
            <el-button type="primary"  @click="cancel(scope.$index,scope.row)">取消</el-button>
            </template>
            <template v-else>
              <el-button type="primary" @click="edit(scope.$index,scope.row)">修改</el-button>
              <el-button type="danger"  @click="del(scope.row)">删除</el-button>
            </template>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <el-button type="primary" @click="addRow">新增行</el-button>
  </div>
</template>

<script>
    export default {
        name: "SupplierManage",
      data() {
        return {
          suppliers:[],
          queryName:'noQuery',
          buffer:[],
          bufferIndex:[],
        }
      },
      mounted:function () {
        this.$parent.show=false
        this.loadSuppliers()
      },
      methods:{
        //新增行
        addRow(){
          this.suppliers.push({
            id:'',
            name:'',
            tag:1,//更新标记 0表示不需要更新 1表示新增 2表示修改标记 不允许相互覆盖
            date:'',
            phone:'',
            address:''
          })
        },
        back(){
          this.$router.back();
        },
        //保存
        save(supplier){
          console.log(JSON.stringify(supplier))
          this.$axios.post('/setting/supplier/add',{
            id:supplier.id,
            name:supplier.name,
            date:this._date.getDate(0),
            address:supplier.address,
            phone:supplier.phone
          }).then(resp=>{
            if(resp && resp.status==200){
              this.$message({
                message:'保存成功',
                type:'success'
              })
              this.loadSuppliers();
            }
          })

        },
        //修改
        edit(index,supplier){
          this.buffer.push(JSON.parse(JSON.stringify(supplier)));
          //存入当前修改行索引
          this.bufferIndex.push(index);
          //变更为修改状态
          supplier.tag=2;
        },
        //取消，复原
        cancel(index,supplier){
          console.log(JSON.stringify(supplier))
          console.log(JSON.stringify(this.buffer))
          console.log(JSON.stringify(this.bufferIndex))
          //如果为新增行，则直接删除
          if(supplier && supplier.tag==1){
            this.suppliers.splice(index,1);
          }else {
            //查询被修改的数据的buffer坐标
            let inx=this.bufferIndex.findIndex((element)=>{
              //console.log(JSON.stringify(index));
              return element==index;;
            });
            //数据复原
            console.log(JSON.stringify(inx))
            supplier=this.buffer[inx];
            console.log(JSON.stringify(supplier))
            //移除缓存
            this.buffer.splice(inx,1);
            this.bufferIndex.splice(inx,1);
            console.log(JSON.stringify(this.buffer))
          }
        },
        //加载
        loadSuppliers(){
          var _this=this
          this.$axios.get('/setting/supplier/'+this.queryName+'/info').then(resp => {
            if (resp && resp.status === 200) {
              _this.suppliers=[]
              for(var i=0;i<resp.data.length;i++){
                let temp={
                  id:resp.data[i].id,
                  name:resp.data[i].name,
                  address:resp.data[i].address,
                  phone:resp.data[i].phone,
                  tag:0
                }
                _this.suppliers.push(temp)
              }
              //_this.suppliers = resp.data
              console.log(JSON.stringify(_this.suppliers))
            }
          })
        },
        //删除该行
        del(supplier){
          /*
          if(this.suppliers[index].tag==1){
            this.suppliers.splice(index,1);
            this.$message({
              message:'删除成功',
              type:'success'
            })
          }

           */
          this.$axios.post('/setting/supplier/delete',{
            id:supplier.id,
            name:supplier.name,
            date:this._date.getDate(0),
            address:supplier.address,
            phone:supplier.phone
          }).then(resp => {
            if (resp && resp.status === 200) {
              this.loadSuppliers()
              this.$message({
                message:'删除成功',
                type:'success'
              })
            }
          }).catch(res=>{
            this.$message({
              message:'删除失败',
              type:'success'})
          })

        },

      },
    }
</script>

<style scoped>

</style>
